<template>
  <div class="content">
    <div class="d2-layout-header-aside-content" flex="dir:top">
      <!-- 顶栏 -->
      <!-- <d2-menu-header flex-box="1"/> -->
      <!-- 顶栏右侧 -->
      <!-- <d2-menu-header flex-box="1"/> -->
      <div class="header-right" flex-box="0">
        <d2-header-locales />
      </div>
    </div>
    <div class="main">
      <el-row :gutter="24">
        <el-col :span="24" class="title">
          <h1>{{ $t('page-register.form.register-title') }}</h1>
        </el-col>
        <el-col :span="24" class="title_sub">
          <div class="wire"></div>
          <h3>{{ $t('page-register.form.basic-information') }}</h3>
          <div class="wire"></div>
        </el-col>
        <el-form ref="elForm" class="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.email')" prop="email">
              <el-input v-model="formData.email" :placeholder="$t('page-register.form.email')" clearable :style="{ width: '60%' }"></el-input>
              <el-button type="" @click="examineEmail" :style="{ width: '40%' }">{{ $t('page-register.form.verification-text') }}
              </el-button>
            </el-form-item>
          </el-col>

          <el-col :span="24" class="title_sub">
            <div class="wire"></div>
            <h3>{{ $t('page-register.form.Account-information') }}</h3>
            <div class="wire"></div>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.phone')" prop="">
              <el-input v-model.number="formData.mobile" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" type="phone" :placeholder="$t('page-register.form.phone')" clearable :style="{ width: '75%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.URL')" prop="url">
              <el-input v-model="formData.url" :placeholder="$t('page-register.form.URL')" clearable :style="{ width: '100%' }">
                <template slot="prepend">http(s)://</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.put-records')" prop="">
              <el-input v-model="formData.beianNo" :placeholder="$t('page-register.form.put-records')" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.company-name')" prop="mchName">
              <el-input v-model="formData.mchName" :placeholder="$t('page-register.form.company-name')" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.certificate-number')" prop="registerCertificateNo">
              <el-input v-model="formData.registerCertificateNo" :placeholder="$t('page-register.form.certificate-number')" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.opening-bank-name')" prop="bankAccountName">
              <el-input v-model="formData.bankAccountName" :placeholder="$t('page-register.form.opening-bank-name')" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.bank-account')" prop="bankAccountNo">
              <el-input v-model.number="formData.bankAccountNo" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" :placeholder="$t('page-register.form.bank-account')" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.opening-bank-number')" prop="bankOpenBankNo">
              <el-input v-model.number="formData.bankOpenBankNo" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" :placeholder="$t('page-register.form.opening-bank-number')" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.company-address')" prop="registerAddress">
              <el-input v-model="formData.registerAddress" :placeholder="$t('page-register.form.company-address')" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.legal-person')" prop="corporation">
              <el-input v-model="formData.corporation" :placeholder="$t('page-register.form.legal-person')" clearable :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.landline-number')" prop="phone">
              <el-input v-model.number="formData.phone" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" :placeholder="$t('page-register.form.landline-number')" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item prop="">
              <div class="" style="color:red;">
                {{$t('page-register.form.tips11')}}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.registered-certificate')" prop="registerCertList">
              <el-upload :file-list="formData.registerCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) => handleFileUpload(params, 'registerCertList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(file, list, 'registerCertList')
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips1')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.Memorandum-Association')" prop="companyPoliceList" required>
              <el-upload :file-list="formData.companyPoliceList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) => handleFileUpload(params, 'companyPoliceList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(file, list, 'companyPoliceList')
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.agent')" prop="companyAgentPassportList" required>
              <el-upload :file-list="formData.companyAgentPassportList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) =>
                    handleFileUpload(params, 'companyAgentPassportList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(
                      file,
                      list,
                      'companyAgentPassportList'
                    )
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.liber')" prop="corporationCertList" required>
              <el-upload :file-list="formData.corporationCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) => handleFileUpload(params, 'corporationCertList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(file, list, 'corporationCertList')
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.Director-resolution')" prop="corporationDecisionList" required>
              <el-upload :file-list="formData.corporationDecisionList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) =>
                    handleFileUpload(params, 'corporationDecisionList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(
                      file,
                      list,
                      'corporationDecisionList'
                    )
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.Incorporation-Form')" prop="nncList" required>
              <el-upload :file-list="formData.nncList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="(params) => handleFileUpload(params, 'nncList')" :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(file, list, 'nncList')
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips2')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.address-proof')" prop="registerAddressCertList" required>
              <el-upload :file-list="formData.registerAddressCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) =>
                    handleFileUpload(params, 'registerAddressCertList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(
                      file,
                      list,
                      'registerAddressCertList'
                    )
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips4')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.account-certificate')" prop="bankAccountNoCertList" required>
              <el-upload :file-list="formData.bankAccountNoCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) => handleFileUpload(params, 'bankAccountNoCertList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(file, list, 'bankAccountNoCertList')
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips5')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.legal-personinfo')" prop="legalPersonCertList" required>
              <el-upload :file-list="formData.legalPersonCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) => handleFileUpload(params, 'legalPersonCertList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(file, list, 'legalPersonCertList')
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips6')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.address-photo')" prop="officeCertList" required>
              <el-upload :file-list="formData.officeCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) => handleFileUpload(params, 'officeCertList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(file, list, 'officeCertList')
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips7')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.annual-return')" prop="">
              <el-upload :file-list="formData.narList" action="#" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="(params) => handleFileUpload(params, 'narList')" :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(file, list, 'narList')
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips8')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.shareholder-information')" prop="">
              <el-upload :file-list="formData.corporation25PercentCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) =>
                    handleFileUpload(params, 'corporation25PercentCertList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(
                      file,
                      list,
                      'corporation25PercentCertList'
                    )
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips9')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.Shareholder-address')" prop="">
              <el-upload :file-list="formData.corporation25PercentAddrCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) =>
                    handleFileUpload(params, 'corporation25PercentAddrCertList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(
                      file,
                      list,
                      'corporation25PercentAddrCertList'
                    )
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips10')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.architecture-diagram')" prop="">
              <el-upload :file-list="formData.enCompanyStructureList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                  (params) => handleFileUpload(params, 'enCompanyStructureList')
                " :on-success="
                  (res, file, list) =>
                    handleFileUploadsucceed(
                      file,
                      list,
                      'enCompanyStructureList'
                    )
                " list-type="picture">
                <el-button size="small" type="primary" icon="el-icon-upload"> {{$t('page-register.form.click-upload')}}</el-button>
                <div slot="tip" class="el-upload__tip">
                  {{$t('page-register.form.tips13')}}
                </div>
              </el-upload>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.electronic-agreement')" prop="isAgree" :disabled="isAgreedIsabled">
              <div class="pdfView" ref="pdfBox">
                <div ref="pdfs">
                  <pdf ref="pdf" v-for="i in numPages" :key="i" :src="pdfUrl" :page="i"></pdf>
                </div>
              </div>
              <el-radio v-model="formData.isAgree" :disabled="isAgreedIsabled" label="1">{{$t('page-register.form.yes')}}</el-radio>
              <el-radio v-model="formData.isAgree" :disabled="isAgreedIsabled" label="2">{{$t('page-register.form.not')}}</el-radio>
            </el-form-item>
            <el-form-item prop="">
              <div class="" style="color:red;">
                {{$t('page-register.form.tips12')}}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('page-register.form.email-code')" prop="code">
              <el-input v-model="formData.code" :placeholder="$t('page-register.form.email-code')" clearable :style="{ width: '70%' }">
              </el-input>
              <!-- || isAgreedIsabled -->
              <el-button type="" @click="senEmailCode" :disabled="isSend" :style="{ width: '30%' }">
                <span v-if="isNewSend">{{ $t('page-register.form.regainText') }}</span>
                <span v-else>{{ count }}</span>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="footer-btn">
            <el-button type="success" @click="submitForm">{{$t('page-register.form.sbumitText')}}</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
import d2HeaderFullscreen from "../../../layout/header-aside/components/header-fullscreen";
import d2HeaderLocales from "../../../layout/header-aside/components/header-locales";
import d2HeaderUser from "../../../layout/header-aside/components/header-user";
import { mapState, mapGetters, mapActions } from "vuex";
import mixinSearch from "../../../layout/header-aside/mixins/search";
import { updataFileOss } from '@/api/tools.js'
import pdf from 'vue-pdf'
import util from "@/libs/util.js";
import c from 'highlight.js/lib/languages/c';
import ApiMain from '@/api/register';
var _this
export default {
  name: "d2-layout-header-aside",
  mixins: [mixinSearch],
  components: {
    d2HeaderFullscreen,
    d2HeaderLocales,
    d2HeaderUser,
    pdf
  },
  props: [],
  // fieldStatus 字段 所有需要修改的字段合集  [{"label": "email", "value": "test", "status": 0, "remark": "通过" },{"label": "mchName", "value": "test", "status": 0, "remark": "通过" }]
  // status  0待审 1通过 2驳回 
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t('page-register.form.tips19')));
      } else if (value !== this.formData.password) {
        callback(new Error(this.$t('page-register.form.tips20')));
      } else {
        callback();
      }
    };

    let validPassword = (rule, value, callback) => {
      let reg = /[\u4E00-\u9FA5]/g
      if (reg.test(value)) {
        callback(new Error(this.$t('page-register.form.tips34')))
      } else {
        callback()
      }
    };

    let validUrl = (rule, value, callback) => {
      if (/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/.test(value) == false) {
        callback(new Error(`${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.URL')}`));
      } else {
        callback();
      }
    }

    return {
      numPages: null, // pdf 总页数
      pdfUrl: "",
      uploadUrl: util.getUploadUrl("trademailcallback/upload"),
      checked: false,
      // 上传图片列表对应关系
      fileList: {
        registerCertList: 'registerCert',
        companyPoliceList: "companyPolice",
        companyAgentPassportList: "companyAgentPassport",
        corporationCertList: "corporationCert",
        corporationDecisionList: "corporationDecision",
        nncList: "nnc",
        registerAddressCertList: "registerAddressCert",
        bankAccountNoCertList: "bankAccountNoCert",
        legalPersonCertList: "legalPersonCert",
        // bankCapitalFlowList: "bankCapitalFlow",
        officeCertList: "officeCert",
        narList: "nar",
        corporation25PercentCertList: "corporation25PercentCert",
        corporation25PercentAddrCertList: "corporation25PercentAddrCert",
        enCompanyStructureList: "enCompanyStructure"
      },
      isAgreedIsabled: true,
      formData: {
        email: undefined,
        code: undefined,
        password: undefined,
        confirmpassword: undefined,
        mobile: undefined,
        mchName: undefined,
        beianNo: undefined,
        url: undefined,
        registerCertificateNo: undefined,
        bankAccountName: undefined,
        bankAccountNo: undefined,
        swiftCode: undefined,
        bankOpenBankNo: undefined,
        registerAddress: undefined,
        corporation: undefined,
        phone: undefined,
        regCert: "",
        companyPolice: "",
        companyAgentPassport: "",
        corporationCert: "",
        corporationDecision: "",
        nnc: "",
        registerAddressCert: "",
        bankAccountNoCert: "",
        legalPersonCert: "",
        bankCapitalFlow: "",
        officeCert: "",
        nar: "",
        fieldStatus: [{ "label": "email", "value": "test", "status": 0, "remark": "通过" }],
        corporation25PercentCert: "",
        corporation25PercentAddrCert: "",
        enCompanyStructure: "",
        registerCertList: [],
        companyPoliceList: [],
        companyAgentPassportList: [],
        corporationCertList: [],
        corporationDecisionList: [],
        nncList: [],
        registerAddressCertList: [],
        bankAccountNoCertList: [],
        legalPersonCertList: [],
        officeCertList: [],
        narList: [],
        corporation25PercentCertList: [],
        corporation25PercentAddrCertList: [],
        enCompanyStructureList: [],
      },
      rules: {
        email: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.email')}`,
            trigger: "blur",
          },
          { type: 'email', message: this.$t('page.form.tips82'), trigger: ['blur', 'change'] }
        ],
        registerCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.registered-certificate')}`,
            trigger: "blur",
          },
        ],
        enCompanyStructureList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.architecture-diagram')}`,
            trigger: "blur",
          },
        ],
        corporation25PercentAddrCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.Shareholder-address')}`,
            trigger: "blur",
          },
        ],
        corporation25PercentCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.shareholder-information')}`,
            trigger: "blur",
          },
        ],
        narList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.annual-return')}`,
            trigger: "blur",
          },
        ],
        officeCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.address-photo')}`,
            trigger: "blur",
          },
        ],
        legalPersonCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.legal-personinfo')}`,
            trigger: "blur",
          },
        ],
        bankAccountNoCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.account-certificate')}`,
            trigger: "blur",
          },
        ],
        registerAddressCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.address-proof')}`,
            trigger: "blur",
          },
        ],

        nncList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.Incorporation-Form')}`,
            trigger: "blur",
          },
        ], corporationDecisionList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.Director-resolution')}`,
            trigger: "blur",
          },
        ],

        corporationCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.liber')}`,
            trigger: "blur",
          },
        ],
        companyAgentPassportList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.agent')}`,
            trigger: "blur",
          },
        ],
        companyPoliceList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.Memorandum-Association')}`,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.email-code')}`,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.password')}`,
            trigger: "blur",
          },
        ],
        confirmpassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        field122: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.phone-area')}`,
            trigger: "change",
          },
        ],
        mobile: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.phone')}`,
            trigger: "blur",
          },
        ],
        url: [
          {
            validator: validUrl, trigger: 'blur'
          },
          // { type: 'url', required: true, message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.URL')}`, trigger: 'change' },
        ],
        beianNo: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.put-records')}`,
            trigger: "blur",
          },
        ],
        mchName: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.company-name')}`,
            trigger: "blur",
          },
        ],
        registerCertificateNo: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.certificate-number')}`,
            trigger: "blur",
          },
          { validator: validPassword, trigger: 'blur' }
        ],
        bankAccountName: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.opening-bank-name')}`,
            trigger: "blur",
          },
        ],
        isAgree: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.electronic-agreement')}`,
            trigger: "blur",
          },
        ],
        bankAccountNo: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.bank-account')}`,
            trigger: "blur",
          },
        ],
        swiftCode: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.opening-bank')}`,
            trigger: "blur",
          },
        ],
        bankOpenBankNo: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.opening-bank-number')}`,
            trigger: "blur",
          },
        ],
        registerAddress: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.company-address')}`,
            trigger: "blur",
          },
        ],
        corporation: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.legal-person')}`,
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.landline-number')}`,
            trigger: "blur",
          },
        ],
      },

      timer: null,
      isNewSend: false,
      isSend: false,
      count: this.$t('page-register.form.sendCode')
    };
  },
  computed: {
    ...mapState("d2admin", {
      keepAlive: (state) => state.page.keepAlive,
      grayActive: (state) => state.gray.active,
      transitionActive: (state) => state.transition.active,
      asideCollapse: (state) => state.menu.asideCollapse,
      asideTransition: (state) => state.menu.asideTransition,
    }),
    ...mapState("d2admin/user", {
      user: "info",
    }),
    ...mapGetters("d2admin", {
      themeActiveSetting: "theme/activeSetting",
    }),
    /**
     * @description 最外层容器的背景图片样式
     */
    styleLayoutMainGroup() {
      return this.themeActiveSetting.backgroundImage
        ? {
          backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`,
        }
        : {};
    },
  },
  watch: {},
  created() {
    _this = this
    this.getRegistration()
  },
  mounted() {
    this.$refs.pdfBox.addEventListener('scroll', this.scroll)
  },
  methods: {
    ...mapActions("d2admin/menu", ["asideCollapseToggle"]),
    scroll() {
      let newHeght = this.$refs.pdfBox.scrollTop
      if (this.$refs.pdfs.offsetHeight - newHeght < this.$refs.pdfBox.offsetHeight + 100) {
        this.isAgreedIsabled = false
      }
    },
    async getRegistration() {
      let data = await ApiMain.getProtocolInfo()
      console.log(data)
      this.pdfUrl = data.url
      this.getNumPages()
    },
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.pdfUrl)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },
    handleFileUploadsucceed(file, fileList, type) {
      this.formData[type] = fileList
    },
    handlePreview(file) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
    },
    async examineEmail() {
      let data = await ApiMain.varifyEmail({ email: this.formData.email })
      if (data == 0) {
        return this.$message({ type: 'error', message: this.$t('page-register.form.tips15') })
      } else {
        this.$message({ type: 'success', message: this.$t('page-register.form.tips14') })
      }
    },
    async senEmailCode() {
      let data = await ApiMain.getEmailCode({ type: 1, email: this.formData.email })
      this.$message({ type: 'success', message: this.$t('page-register.form.tips21') })
      this.countDown()
      this.isSend = true
      this.isNewSend = false
    },
    countDown() {
      //发送验证码
      if (!this.timer) {
        this.count = 60;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 10) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.count = this.$t('page-register.form.tips21');
            this.isNewSend = true
            this.isSend = false
          }
        }, 1000);
      }
    },
    /**
     * 接收点击切换侧边栏的按钮
     */
    handleToggleAside() {
      this.asideCollapseToggle();
    },
    returnDisposeUrL(arr, index) {
      let str = ''
      try {
        // 过滤一下上传失败 element判断图片为一张是
        arr.forEach(item => {
          if (item.status == "success") {
            str += item.response.requestUrls[0] + ','
          }
        })
        str = str.substring(0, str.length - 1)
      } catch (error) {
        console.log('处理文件错误错误:', index, arr, error)
      }
      return str
    },
    async submitForm() {
      // 需要的字段
      let fieldList = ['email', 'code', "url", "beianNo", "mobile", "mchName", "registerCertificateNo", "bankAccountName", "bankAccountNo", "bankOpenBankNo", "registerAddress", "corporation", "corporation"
        , "corporation", "phone", "isAgree", "legalPersonCert", "fieldStatus", "nar", "registerCert", "companyPolice", "companyAgentPassport", "corporationCert", "corporationDecision"
        , "nnc", "registerAddressCert", "bankAccountNoCert", "officeCert", "corporation25PercentCert", "corporation25PercentAddrCert", "enCompanyStructure"]

      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) return this.$message({ type: 'warning', message: this.$t('page-register.form.tips16') });


        Object.keys(_this.fileList).forEach(function (index) {
          _this.formData[_this.fileList[index]] = _this.returnDisposeUrL(_this.formData[index], index)
        });


        let updataFrom = {}
        fieldList.forEach(item => {
          updataFrom[item] = _this.formData[item]
        })
        let start = await ApiMain.register(updataFrom)

        this.$message({ type: 'success', message: this.$t('page-register.form.tips17') })
        this.$router.push({
          name: 'registerStait',
          query: {
            email: this.formData.email
          }
        })

      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error(this.$t('page-register.form.tips18'));
      }
      return isRightSize;
    },
    handleFileChange(file, fileList) {
      this.file = fileList;
    },
    async handleFileUpload(params, type) {
      let data = await updataFileOss(params, type)
      return data.res
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
}
.main {
  width: 50%;
  margin: 0px auto;
}
.elForm {
  height: 100%;
  margin: 0px auto;
}
.el-upload__tip {
  line-height: 1.2;
}
.title {
  text-align: center;
  margin-top: 50px;
}
.title_sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .wire {
    width: 40%;
    height: 1px;
    background-color: rgb(227, 227, 227);
  }
}
.footer-btn {
  display: flex;
  justify-items: center;
  justify-content: center;
  margin-bottom: 100px;
  margin-top: 50px;
}
.header-right {
  float: right;
  display: flex;
  justify-content: flex-end;
  padding-right: 100px;
  margin-top: 30px;
}
.pdfView {
  width: 100%;
  min-height: 300px;
  max-height: 500px;
  overflow: auto;
}
.pdfView-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 100px;
}
</style>
<style lang="scss">
// 注册主题
@import "~@/assets/style/theme/register.scss";
</style>